<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!-- react核心库[不能操作dom,也不能渲染] -->
    <script src="../ExternalLibrary/js/react.js"></script>
    <!-- react操作dom库[操作dom,渲染页面]] -->
    <script src="../ExternalLibrary/js/react-dom.js"></script>
    <!-- 编译语法库 -->
    <script src="../ExternalLibrary/js/babel.js"></script>
    <!-- 此处type="text/babel" 表示该标签中的内容交给babel.js翻译,翻译成低版本的浏览器也支持的语法 -->
    <script type="text/babel">
        // 组件都有共通的特性,比如都能渲染,都有事件,都能通信等,
        // 所以我们不能从0开始写,故而需要通过继承的方式实现共同的特性(react显示继承,java隐式继承)

        //定义组件[组件名必须大写]
        class Aaa extends React.Component{
 
            //react中的组件作用是渲染页面用的
            //但是每个页面显示的效果都不一样,故而我们要重写父类中的渲染方法
            //如果不重写父类中的渲染方法,会报错,因为不知道怎么展示肯定要报错呀
            // 为什么不设计成隐式继承呢？ 因为总不能把所有的class都变成组件吧？也是体现了非侵入性

            render(){
                return <span>aaa</span>
            }
        }

        let oDiv = document.getElementById('div1');
        
        ReactDOM.render(
            <Aaa></Aaa>
        ,oDiv)
    </script>
</head>
<body>
    <div id = "div1">

    </div>
</body>